{% extends "home/home.html" %}
{% load i18n %}

{% block head_title%}Detalles del Pájaro{% endblock %}

{% block content %}
	 <div id="content">
	     <!--Breadcrumb Part Start-->
             <div class="breadcrumb"> <a href="{% url 'catalog_base' %}">ESPECIES</a> &raquo;
                                      <a href="{% url 'subspecies' Specie.id %}">SubESPECIES</a> &raquo;
                                      <a href="{% url 'birds' Specie.id Subspecie.id %}">EJEMPLAR</a>
             </div>
         <!--Breadcrumb Part End-->
	 
	 
     <h1>{{Bird.mutation}}</h1>
     {% for bird in DetailBirds%}
         <div class="product-info">
             <div class="left">
                 <div class="image"><a href="" title="" class="cloud-zoom colorbox" id='zoom1' rel="adjustX: 0, adjustY:0, tint:'#000000',tintOpacity:0.2, zoomWidth:360, position:'inside', showTitle:false">
                 <img src="{{MEDIA_URL}}{{Bird.image}}" title="" alt="" id="image" />
                 <span id="zoom-image"><i class="zoom_bttn"></i> Zoom</span></a>
                 </div>
                
 <!-------------- AQUI IRIAN LAS MINIATURAS DEL FOTOS ---------------------->
 
                 <div class="image-additional"> <a href="" title="" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '' ">
                    <img src="" width="62" title="" alt="" /></a> <a href="" title="" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '' ">
                    <img src="" width="62" title="" alt="" /></a> <a href="" title="" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '' ">
                    <img src="" width="62" title="" alt="" /></a>
                 </div>
             </div>
             
             <div class="right">
                 <div class="description"> 
                     <span>Especie:</span> <a href="{% url 'subspecies' Specie.id %}">{{bird.specie}}</a><br />
                     <span>Subespecie:</span> <a>{{bird.subspecie}}</a><br />
                     <span>Mutacion:</span> Mutación<br />
                     <span>Disponibilidad:</span> Stock
                 </div>
                 <div class="price">Precio: <span class="price-new">96.00€</span> <br /></div>      
                          
                 <div class="cart">
                     <div>
                         <div class="qty"> 
                             <strong>Cantidad:</strong> <a class="qtyBtn mines" href="javascript:void(0);">-</a>
                             <input id="qty" type="text" class="w30" name="quantity" size="2" value="1" />
                             <a class="qtyBtn plus" href="javascript:void(0);">+</a>
                             <input type="hidden" name="product_id" size="2" value="30" />
                             <div class="clear"></div>
                         </div>
                         <input type="button" value="Añadir al Carro" id="button-cart" class="button" />
                     </div>              
                 </div>
          <!---- AddThis Button BEGIN -------------------------------------->
                 <div class="addthis_toolbox addthis_default_style "> 
                     <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> 
                     <a class="addthis_button_tweet"></a> <a class="addthis_button_google_plusone" g:plusone:size="medium"></a> 
                     <a class="addthis_counter addthis_pill_style"></a> 
                 </div>
                 <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=xa-506f325f57fbfc95"></script>
     <!--------- AddThis Button END ------------------------------------->  
             </div>
     
         </div>
         
   <!------------- DETALLES --------------------------------------------->
        <div id="tabs" class="htabs"> 
            <a href="#tab-description">Detalles</a> 
        </div>
        
        <div id="tab-description" class="tab-content">
            <p>{{bird.details}}<br>&nbsp;</p>
        </div>   
        
        <div class="clear"></div>
    </div>  
                 
{% endblock %}